import { For, Show } from "solid-js"
import { menus } from "../config/menus"
import { useNavigate } from "@solidjs/router";
import { currPath, setCurrPath, title } from "@/store/tabs";
import { ComUtils } from "@/utils/Com";
export default function () {

    const navigate = useNavigate()
    const goPath = (path: string) => {
        setCurrPath(path)
        navigate(path)
    }
    return <nav class="grid grid-cols-3 px-5">
        <div>
            <For each={menus}>
                {
                    m => <Show when={!(m.path === '/editor' && currPath() !== m.path)}>
                        <button onclick={() => goPath(m.path)}>
                            <span class="tab-item" classList={{ 'tab-item-active': currPath() == m.path }}>
                                {m.title}
                            </span>
                        </button>
                    </Show>
                }
            </For>
        </div>
        <div class="flex items-center justify-center ">
            <p class="whitespace-nowrap overflow-hidden text-ellipsis">
                <Show when={currPath() === '/editor'} fallback={<span>{title()}</span>}>
                    <span class="text-[#8d9091] mr-1">
                        {ComUtils.tr('editing')}
                    </span>
                    <span>
                        [ {title()} ]
                    </span>
                </Show>
            </p>
        </div>
        <div class="flex justify-end items-center gap-4">
            <a class="text-[#42A5F5] underline" href="https://doc.scriptbox.space" target="_blank" rel="noopener noreferrer">
                {ComUtils.tr('tutorials_and_scripts')}
            </a>
        </div>
    </nav>
}